<template>
<section class="check-result">
    <div class="title-section">
        <div class="title">
            进项发票核对结果
            <!-- <el-button
                class="export-excel-btn"
                type="primary"
                size="mini"
                icon="el-icon-download"
                @click="exportExcel">
                导出 Excel
            </el-button> -->
        </div>
    </div>
    <el-table
        ref="stockTable"
        :data="stockTableData"
        style="width: 100%">
        <el-table-column
            prop="invoiceNumber"
            label="发票号码"
            width="100">
        </el-table-column>
        <el-table-column
            prop="sellerName"
            label="销售方">
        </el-table-column>
        <el-table-column
            prop="buyerName"
            label="购买方">
        </el-table-column>
        <el-table-column
            prop="itemName"
            label="货物名称">
        </el-table-column>
        <el-table-column
            prop="invoiceAmount"
            label="金额"
            width="80">
        </el-table-column>
    </el-table>

    <div class="title-section">
        <div class="title">
            销项发票核对结果
        </div>
    </div>
    <el-table
        ref="sellTable"
        :data="sellTableData"
        style="width: 100%">
        <el-table-column
            prop="invoiceNumber"
            label="发票号码"
            width="100">
        </el-table-column>
        <el-table-column
            prop="sellerName"
            label="销售方">
        </el-table-column>
        <el-table-column
            prop="buyerName"
            label="购买方">
        </el-table-column>
        <el-table-column
            prop="itemName"
            label="货物名称">
        </el-table-column>
        <el-table-column
            prop="invoiceAmount"
            label="金额"
            width="80">
        </el-table-column>
    </el-table>

    <div class="title-section">
        <div class="title">
            银行存款核对结果
        </div>
    </div>
    <el-table
        ref="bankTable"
        :data="bankTableData"
        style="width: 100%">
        <el-table-column
            prop="paymentDate"
            label="打款日期">
        </el-table-column>
        <el-table-column
            prop="payee"
            label="收款人">
        </el-table-column>
        <el-table-column
            prop="moneymaker"
            label="打款人">
        </el-table-column>
        <el-table-column
            prop="amount"
            label="金额"
            width="80">
        </el-table-column>
        <el-table-column
            prop="remarks"
            label="备注/用途">
        </el-table-column>
    </el-table>
</section>
</template>

<script>
import exportExcel from '@/components/exportExcel';

export default {
    props: [
        'accountBillData'
    ],
    data() {
        return {
            stockTableData: [],
            sellTableData: [],
            bankTableData: [],

            stockSheet: [],
            sellSheet: [],
            bankSheet: [],
        };
    },
    mounted() {
        // 获取上传相关信息
        this.$http.get('/accountBills/showErrorInvoice', {
            params: {
                companyName: this.accountBillData.companyName
            }
        }).then(res => {
            res.data.forEach(item => {
                switch(item.type) {
                    case '1':
                        this.stockTableData.push(item);
                        this.pushSheet('stock', item);
                        break;
                    case '2':
                        this.sellTableData.push(item);
                        this.pushSheet('sell', item);
                        break;
                    case '3':
                        this.bankTableData.push(item);
                        this.pushSheet('bank', item);
                        break;
                }
            });
        });
    },
    methods: {

        /**
         * 导出 excel
         */
        exportExcel() {
            const stockTitle = [];
            this.$refs.stockTable.columns.forEach(item => {
                stockTitle.push(item.label);
            });

            const bankTitle = [];
            this.$refs.bankTable.columns.forEach(item => {
                bankTitle.push(item.label);
            });

            const data = [
                {
                    sheetName: '进项发票核对结果',
                    data: [
                        stockTitle,
                        ...this.stockSheet
                    ]
                },
                {
                    sheetName: '销项发票核对结果',
                    data: [
                        stockTitle,
                        ...this.sellSheet
                    ]
                },
                {
                    sheetName: '银行存款核对结果',
                    data: [
                        bankTitle,
                        ...this.bankSheet
                    ]
                }
            ];

            exportExcel(data, this.accountBillData.companyName);
        },

        /**
         * 在 excel 中分 sheet 存储数据
         */
        pushSheet(type, data) {
            const result = [];
            this.$refs[`${type}Table`].columns.forEach(item => {
                result.push(data[item.property]);
            });
            this[`${type}Sheet`].push(result);
        }
    }
}
</script>

<style lang="less" scoped>
.check-result {
    .title-section {
        margin: 0;
    }
    .export-excel-btn {
        margin-top: -8px;
        float: right;
    }
    .el-table {
        margin: 5px 0;
    }
}

.el-table-column{
    height: 6px;
}
</style>
